@import "./components/theme.scss";
@import "./components/anim.scss";

page {
  background-color: $bgColor;
  height: 100%;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.num {
  color: $textNumColor;
  font-size: 26rpx;
  text-align: end;
  line-height: 42rpx;
}

.num.big {
  font-size: 34rpx;
}

.num.p {
  color: $textGreenColor;
}

.num.l {
  color: $textRedColor;
}

.header_bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  .btn {
    padding: 0 40rpx;
    font-size: 32rpx;
    color: $mainColor;
    line-height: 100rpx;
  }

  .space {
    flex: 1;
  }
}

.header_bar+.list {
  position: absolute;
  top: 110rpx;
  bottom: 1rpx;
}

.list {

  .cell {
    min-height: 100rpx;
    margin: 0 $page-lr-margin 20rpx $page-lr-margin;
    background-color: $bgCellColor;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    overflow: hidden;

    .main {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      // align-items: center;
      min-height: 100rpx;

      .title {
        font-size: 32rpx;
        color: $textMainColor;
        line-height: 55rpx;
        padding: 20rpx 0;
        flex: 1;
        margin-right: 20rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .title+.num {
        line-height: 100rpx;
      }
    }

    .sub_box {
      overflow: hidden;
    }

    .sub {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      min-height: 80rpx;
      align-items: center;
      margin-left: 10rpx;
      padding: 4rpx 0;
    }

    .sub .title {
      font-size: 26rpx;
      color: $textMainColor;
    }

    .title_box {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .t_sub {
        color: $textNumColor;
        font-size: 22rpx;
      }
    }

    .sub>.title,
    .sub>.title_box {
      margin-left: 10rpx;
    }

    .num_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100rpx;
      min-width: 150rpx;
      padding: 12rpx 0 12rpx 30rpx;
      box-sizing: border-box;
    }

    .main.s .num_box {
      min-height: 120rpx;
    }
  }

  .list_show .main .title {
    white-space: pre-wrap;
    line-height: 55rpx;
  }

  .cell>view,
  .sub_box>view {
    border-bottom: $border_height solid $borderColor;

    &:last-child {
      border-bottom: none;
    }
  }

  .space {
    height: 100rpx;
    margin: 0 $page-lr-margin 20rpx $page-lr-margin;
    background-color: $bgCellColor;
    border-radius: 20rpx;
  }

  .cell_no_data {
    min-height: 100rpx;
    line-height: 100rpx;
    margin: 0 $page-lr-margin 20rpx $page-lr-margin;
    text-align: center;
    color: $textMainColor;
    font-size: 28rpx;
  }

}

input,
.input_btn,
.sel_input {
  font-size: 32rpx;
  text-align: start;
  padding: 0 20rpx;
  flex: 1;
  color: $textMainColor;
}

.input_btn,
.sel_input {
  margin-top: -$border_height;
  height: $def_input_height;
  display: flex;
  align-items: center;
}

.placeholder {
  color: $textPlaceholderColor;
}

modal-view {

  .tip {
    color: $textRedColor;
    font-size: 30rpx;
    line-height: 40rpx;
    text-align: left;
    padding: 10rpx 0;
  }

  .modal_cell {
    position: relative;
    margin: 10rpx 0;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    // align-items: center;

    .title {
      font-size: 32rpx;
      color: $textMainColor;
      line-height: $def_input_height;
    }

    .title.rm {
      margin-right: 10rpx;
    }

    .title.lrm {
      margin: 0 10rpx 0 20rpx;
    }
  }

  .item_box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-height: 280rpx;

    .item {
      background-color: $bgItemColor;
      height: $def_input_height;
      min-width: 50rpx;
      color: $textMainColor;
      line-height: $def_input_height;
      padding: 0 16rpx;
      font-size: 32rpx;
      display: inline-block;
      border-radius: $def_btn_radius;
      margin: 0 20rpx 20rpx 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

  }

  .del_btn {
    margin: 30rpx 0 10rpx 0;
    width: 100% !important;
    background-color: $bgItemColor;
    color: $textNumColor;
  }

}

.import_modal {
  
  .cell {
    display: flex;
    justify-content: space-between;

    &.sub {
      text {
        line-height: 36rpx;
      }
    }

    text {
      font-size: 26rpx;
      color: $textMainColor;
      line-height: 50rpx;
      padding: 0 6rpx;
      text-align: start;
      overflow: auto;
    }

    .tt {
      flex: 2;
      white-space: nowrap;
    }

    .p {
      white-space: nowrap;
      flex: 1;
    }

    .t {
      width: 150rpx;
      white-space: nowrap;
    }
  }
}

.err_page_cell {
  background-color: $textRedColor;

  view {
    padding: 10rpx 40rpx;
    color: $bgCellColor;
    font-size: 28rpx;
    line-height: 36rpx;
    white-space: pre-wrap;
  }
}